<template>
  <div class="inline-flex b-create-widget">
    <el-button type="primary"
               size="mini"
               icon="el-icon-circle-plus-outline"
               @click="openWidgetModal">

      {{  $t('custom.widget.addnewwidget')}}
    </el-button>

    <AddOrUpdate ref="widget-pre-create" :defaultDataset="defaultDataset"/>
  </div>
</template>

<script>
import AddOrUpdate from './add-or-update.vue'
import { cloneDeep } from 'lodash'

export default {
  name: 'BCreateWidget',
  components: {
    AddOrUpdate
  },
  props: {
    defaultDataset: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      visible: false
    }
  },
  computed: {
    cloneDataset () {
      return cloneDeep(this.defaultDataset || {})
    }
  },
  methods: {
    openWidgetModal () {
      this.visible = true
      if (this.$refs['widget-pre-create']) {
        this.$refs['widget-pre-create'].init()
      }
    },
    closeWidgetModal () {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.b-create-widget {
  margin-right: 16px;
}
</style>
